@charset "utf-8";
html,body{font-family: "Microsoft YaHei","Arial";}
/*hide scroll*/
/* html,body{-ms-overflow-style: none;} */
/* ::-webkit-scrollbar-track-piece { position: fixed;right:0;background-color:#f8f8f8;}
::-webkit-scrollbar {width:0px;height:0px;}
::-webkit-scrollbar-thumb {background:#dddddd;background-clip:padding-box;min-height:28px;}
::-webkit-scrollbar-thumb:hover {background:#bbb;} 
::-webkit-scrollbar-button {
    width: 1.0416666666666667vw;
    height: 1.0416666666666667vw;
}

::-webkit-scrollbar-button:vertical:single-button:start {  
    background:url(../images/scrollbar_top.jpg) no-repeat;
    background-size: cover;
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    background:url(../images/scrollbar_btm.jpg) no-repeat;
    background-size: cover;
    cursor: pointer;
   
}
::-webkit-scrollbar-button:horizontal:single-button:start {
    background:url(../images/scrollbar_top_hover.jpg) no-repeat;
    background-size: cover;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    background:url(../images/scrollbar_btm_hover.jpg) no-repeat;
    background-size: cover;
    cursor: pointer;
}
*/
img{width: 100%;height: 100%;object-fit: cover;}
:root {
    --mainColor: #0348b5;
    --colora:#aaaaaa;
    --colorb:#bbbbbb;
    --colorc:#cccccc;
    --colord:#dddddd;
    --colore:#eeeeee;
    --colorf:#ffffff;
    --color0:#000000;
    --color1:#111111;
    --color2:#222222;
    --color3:#333333;
    --color4:#444444;
    --color5:#555555;
    --color6:#666666;
    --color7:#777777;
    --color8:#888888;
    --color9:#999999;
    --lineColor: #6d768a;
    --lineColor2: #ccdee1;
    --bgColor1: #eeeff3;
    --bgColor2: #f3f4f8;

}
a{color: var(--mainColor);}

.box {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.box_con {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 9.375vw;
    max-width: 1898px;
}
.box_con2 {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1340px;
}
.mains_text img{max-width: 100%;width: auto;height: auto;}
/*头部样式*/
header{margin:0 auto;z-index: 99;transition: all 0.5s;background: var(--colorf);transition: ease-in-out 0.5s;box-shadow: 0 8px 15px rgba(0, 88, 106, 0.2);}

.head_con{justify-content: space-between;align-items: center;}
.head_con h1{max-width: 225px;line-height: 90px;}
.head_right{width: auto;}
.head_nav>ul>li{line-height: 90px;margin: 0 35px;position: relative;}
.head_nav>ul>li>a{display: block;font-size: 20px;color: var(--color3);padding: 0 25px;position: relative;}
.head_nav>ul>li>a::after{content: "";display: block;width: 0;height: 3px;background: var(--mainColor);transition: all 0.5s;position: absolute;bottom: 0;left: 0;right: 0;}
.head_nav>ul>li.active>a,
.head_nav>ul>li:hover>a{color: var(--mainColor);}
.head_nav>ul>li.active>a::after,
.head_nav>ul>li:hover>a::after{width: 100%;transition: all 0.5s;}
.head_nav ul li ul{width: 200px;position: absolute;z-index: 2;background: var(--colorf);left: 50%;margin-left: -100px;padding: 10px 0;display: none;}
.head_nav ul li ul li{line-height: 36px;text-align: left;}
.head_nav ul li ul li a{font-size: 16px;color: var(--lineColor);display: block;padding: 0 30px;}
.head_nav ul li ul li:hover a{background: var(--mainColor);color: var(--colorf);}
.head_search{width: 150px;height: 34px;border:1px solid var(--colore);background: var(--bgColor1);position: relative;margin: 27px auto;}
.head_search input{width: 100%;height: 34px;line-height: 34px;background: none;border: none;padding-left: 10px;box-sizing: border-box;padding-right:34px}
.head_search button{position: absolute;z-index: 2;top: 0;right: 0px;width: 34px;height: 34px;background: none;border:none;background: url(../images/search_icon.png) no-repeat center;}
.head_search button::after{content: "";display: block;width: 20px;height: 20px;margin: 0 auto;}
.head_lange,
.head_search{margin-left: 40px;}
.head_lange a{display: block;line-height: 90px;font-size: 20px;color: var(--color3);font-family: 'Arial';}
.head_lange a::before{content: "";display: inline-block;width: 19px;height: 19px;background: url(../images/lange_icon.png) no-repeat;background-size: contain;vertical-align: middle;}
.fixeds header{position: fixed;top: 0;left: 0;right: 0;transition: ease-in-out 0.5s;}

/*底部样式*/
footer{background: url(../images/footer_bg.jpg) no-repeat;background-size: cover;}
.foot_top{padding: 80px 0}
.foot_tit{margin-bottom: 20px;}
.foot_tit ul li{font-size: 16px;line-height: 34px;color: var(--color3);cursor: pointer;margin-right: 20px;}
.foot_tit ul li.active{color: var(--mainColor);border-bottom: 1px solid var(--mainColor);}
.foot_tct_item{display: none;}
.foot_tct_item.active{display: block;}
.foot_tst{background: url(../images/foot_tst_ico.png) no-repeat left;padding-left: 70px;margin-bottom: 10px;}
.foot_tst p{font-size: 14px;line-height: 24px;color: var(--color6);}
.foot_tst b{font-size: 24px;font-weight: bold;color: var(--mainColor);font-family: Arial;}
.foot_txt p{font-size: 16px;line-height: 32px;color: var(--color3);}
.foot_logo{max-width: 225px;margin-bottom: 20px;}
.foot_con{justify-content: space-between;}
.foot_right{width: auto;}
.foot_right dl{margin-left: 100px;}
.foot_right dl dt{font-size: 20px;line-height: 40px;color: var(--color3);margin-bottom: 20px;}
.foot_right dl dd a{display: block;font-size: 16px;line-height: 28px;color: var(--color6);}
.foot_btm{background: rgba(0, 88, 106, 0.06);}
.foot_btm p{border-top: 1px solid rgba(2, 65, 130, 0.1);padding: 20px 0;}
.foot_btm p{color: var(--color9);}
.foot_btm p a {color: var(--color6);opacity: 0.6;}

.pops{position: fixed;right: 0;bottom: 20%;z-index: 9;display: none;}
.pops.toshow{display: block;}
.pops ul li{position: relative;margin-top: 10px;cursor: pointer;}
.pops ul li span{width: 60px;height: 60px;border-radius: 8px 0 0 8px;background: var(--mainColor);display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 13px;color: var(--colorf);text-transform: uppercase;position: relative;z-index: 2;}
.pops ul li span img{width: 20px;height: 20px;display: block;margin-bottom: 5px;}
.pops ul li p{position: absolute;right: 50px;background: var(--mainColor);top: 0;width: 160px;font-size: 16px;line-height: 60px;color: var(--colorf);transform: translateX(100%);transition: all 0.5s;padding: 3px 0 3px 8px;}
.pops ul li:hover p{transform: translateX(0);transition: all 0.5s;}
.hotline-p em{
    line-height: 18px;
    width: 100%;
    display: block;
    height: auto;
    font-size: 13px;
}
/*banner样式*/
.banner{position: relative;height:570px;}
.banner .swiper-slide a{display: block;width: 100%;height:570px;}
.banner .swiper-button-prev,
.banner .swiper-button-next{width:70px;height:70px;background: rgba(255, 255, 255, 0.1);border:1px solid rgba(255, 255, 255, 0.5);display: none;}
.banner .swiper-button-prev:hover,
.banner .swiper-button-next:hover{background: rgba(0, 68, 180, 0.9);border:1px solid rgba(0, 68, 180, 0.9);}
.banner .swiper-button-prev::after,
.banner .swiper-button-next::after{font-size: 20px;color: var(--colorf);}
.banner .swiper-pagination-banner{position: absolute;text-align: center;z-index: 3;bottom: 40px;}
.banner .swiper-pagination-banner .swiper-pagination-bullet{width:60px;height:4px;background:var(--colorf);margin:0 10px;opacity: 1;border-radius: 0;display: inline-block;opacity: 0.4;}
.banner .swiper-pagination-banner .swiper-pagination-bullet-active{background:var(--mainColor);opacity: 1;}
.banner .swiper-button-prev{left: 10px;}
.banner .swiper-button-next{right: 10px;left: auto;}
.title {margin-bottom:20px;}
.title h4{font-size: 24px;line-height: 30px;color: var(--colorf);text-transform: uppercase;position: relative;padding-left: 15px;}
.title h4::before{content: "";display: block;width: 3px;height: 14px;background: var(--colorf);position: absolute;top: 50%;margin-top: -7px;left: 0;}
.title h3{font-size: 42px;color: var(--colorf);margin: 10px auto 20px;}
.title p{font-size: 16px;color: var(--colorf);opacity: 0.5;}

.more a{display: inline-block;font-size: 14px;line-height: 50px;color: var(--colorf);border: 1px solid var(--colorf);padding: 0 30px;border-radius: 5px;}
.more a::after{content: "";display: inline-block;vertical-align: middle;width: 16px;height: 6px;display: none;}
.more a:hover{background: var(--mainColor);}

.product .product_con{justify-content: space-between;position: relative;}
.product .product_left{max-width: 420px;box-sizing: border-box;border-right: 1px solid var(--colore);padding: 90px 0;padding-right: 55px;}
.product .product_left .title h4::before{background: var(--mainColor);}
.product .product_left .title h4,
.product .product_left .title h3{color: var(--color3);}
.product .product_left .title p{color: var(--lineColor);}
.product .product_left .desc{color: var(--color3);}
.product .product_left .more a{color: var(--color3);padding: 0 30px;border-radius: 5px;border: 1px solid var(--color6);}
.product .product_left .more a::after{display: none;}
.product .product_left .more a:hover{background: var(--mainColor);color: var(--colorf);}
.product .product_right{padding:90px 0;box-sizing: border-box;width: calc(100% - 475px);}
.product .product_right .product_nav .nav-item{text-align: center;font-size: 20px;line-height: 42px;color: var(--color3);width: calc(100% / 9);}
.product .product_right .product_nav .nav-item a{color: var(--color3);}
.product .product_right .product_nav .nav-item.active,
.product .product_right .product_nav .nav-item:hover{background: var(--mainColor);color: var(--colorf);}
.product .product_right .product_nav .nav-item:hover a{color: var(--colorf);}

.product .product_right .mySwiper{height: 750px !important;position: static;margin-top: 70px;}
.product .product_right .swiper {width: 100%;height: 100%;margin-left: auto;margin-right: auto;}
.product .product_right .swiper-slide {height: calc((100% - 30px) / 2) !important;display: flex;justify-content: center;align-items: center;}
.product .product_right .swiper-slide .item{padding: 30px 20px;box-sizing: border-box;box-shadow: 0 8px 15px rgba(0, 88, 106, 0.05);transition: all 0.5s;position: relative;}
.product .product_right .swiper-slide .item::after{content: "";display: block;width: 0;height: 3px;background: var(--mainColor);position: absolute;bottom: 0;left: 0;right: 0;transition: all 0.5s;}
.product .product_right .swiper-slide .item h3{font-size: 24px;line-height: 36px;color: var(--color3);}
.product .product_right .swiper-slide .item p{font-size: 16px;line-height: 30px;color: var(--lineColor);margin-bottom: 20px;}
.product .product_right .swiper-slide .item span{display: block;width: 100%;height: 180px;overflow: hidden;}
.product .product_right .swiper-slide .item span img{transition: all 0.5s;}
.product .product_right .swiper-slide .item:hover{background: var(--colorf);box-shadow: 0 8px 15px rgba(0, 88, 106, 0.2);transition: all 0.5s;}
.product .product_right .swiper-slide .item:hover::after{width: 100%;transition: all 0.5s;}
.product .product_right .swiper-slide .item:hover span img{transition: all 0.5s;transform: scale(1.1);}
.product .product_right .swiper_btn{position: absolute;bottom: 10%;left: 9.375vw;width: 130px;height: 50px;display: flex;justify-content: space-between;z-index: 4;}
.product .product_right .swiper_btn .swiper-button-prev,
.product .product_right .swiper_btn .swiper-button-next{width: 50px;height: 50px;border: 1px solid var(--color3);box-sizing: border-box;position: static;}
.product .product_right .swiper_btn .swiper-button-prev::after,
.product .product_right .swiper_btn .swiper-button-next::after{font-size: 20px;color: var(--color3);}
.product .product_right .swiper_btn .swiper-button-prev:hover,
.product .product_right .swiper_btn .swiper-button-next:hover{background: var(--mainColor);border:1px solid var(--mainColor)}
.product .product_right .swiper_btn .swiper-button-prev:hover::after,
.product .product_right .swiper_btn .swiper-button-next:hover::after{color: var(--colorf);}
.swiper-pagination-mySwiper{text-align: center;display: none;}
.swiper-pagination-mySwiper.swiper-pagination-bullet{width:60px;height:4px;background:var(--colorf);margin:0 10px;opacity: 1;border-radius: 0;display: inline-block;opacity: 0.4;}
.swiper-pagination-mySwiper .swiper-pagination-bullet-active{background:var(--mainColor);opacity: 1;}

.machining{padding: 80px 0;}
.machining .xx{width: 305px;height: 1px;background: rgba(255, 255, 255, 0.5);margin: 30px 0;}
.machining_items{margin-top: 110px;}
.machining_items .item{width: calc(100% / 4 - 34.5px);margin-right: 46px;transition: all 0.5s;}
.machining_items .item:nth-child(4n){margin-right: 0;}
.machining_items .item .pic{width: 100%;height: 290px;overflow: hidden;}
.machining_items .item .pic img{transition: all 0.5s;}
.machining_items .item .tct{padding: 20px 10px;background: var(--colorf);}
.machining_items .item .tct h3{font-size: 26px;line-height: 36px;color: var(--color3);}
.machining_items .item .tct p{font-size: 16px;line-height: 30px;color: var(--lineColor);margin-top: 10px;}
.machining_items .item:hover{box-shadow: 0 8px 15px rgba(0, 88, 106, 0.2);transition: all 0.5s;transform: translateY(-20px);}
.machining_items .item:hover .pic img{transition: all 0.5s;transform: scale(1.1);}

.about{padding: 100px 0;}
.about_con{justify-content: space-between;align-items: center;}
.about_left,
.about_right{max-width: 750px;width: 49%;}
.about_right{height: 570px;overflow: hidden;}
.about_right img{transition: all 0.5s;}
.about_right:hover img{transition: all 0.5s;transform: scale(1.1);}
.machining .desc,
.about_left .desc,
.product_left .desc{font-size: 16px;line-height: 36px;color: var(--colorf);margin: 30px 0;max-width: 100%;}

.machining .desc{max-width: 620px;}



.bar{height: 550px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.bar_en{font-size: 120px;font-weight: bold;text-transform: uppercase;background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 85%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;font-family: Arial, Helvetica, sans-serif;}
.bar_cn{font-size: 60px;color: var(--colorf);margin-top: -70px;font-weight: bold;letter-spacing: 5px;}

.crumbs{margin-top: -85px;position: relative;z-index: 2;padding-bottom: 40px;}
.crumbs_con{justify-content: space-between;align-items: flex-end;}
.crumbs_left ul li{font-size: 18px;line-height: 45px;color: var(--color3);margin-right: 15px;border-radius: 10px 4px 10px 4px;background: rgba(255, 255, 255, 0.8);overflow: hidden;}
.crumbs_left ul li a{display: block;color: var(--color3);padding: 0 15px;}
.crumbs_left ul li.active a,
.crumbs_left ul li:hover a{color: var(--colorf);background: var(--mainColor);}
.crumbs_right dl dt{width: 12px;height: 12px;margin-right: 5px;}
.crumbs_right dl dd a{font-size: 14px;color: var(--colorf);}

.main{margin: 60px auto;}

/* about */
.about_tct{justify-content: space-between;padding: 30px 0;}
.about_tct_left{max-width: 640px;}
.about_tct_left .about_tct_tit{border-bottom: 1px solid var(--lineColor2);margin-bottom: 30px;padding-bottom: 20px;margin-top: 30px;}
.about_tct_left .about_tct_tit h3{font-size: 42px;color: var(--color3);}
.about_tct_left .about_tct_tit p{font-size: 18px;line-height: 36px;color: var(--mainColor);border-bottom: 3px solid var(--mainColor);display: inline-block;margin-bottom: -22px;padding-bottom: 20px;}
.about_tct_right{max-width: 650px;height: 494px;border-radius: 10px 30px 10px 30px;position: relative;}
.about_tct_right::before{content: "";display: block;width: 100%;height: 100%;border: 1px solid var(--lineColor2);box-sizing: border-box;border-radius: 10px 30px 10px 30px;position: absolute;top: 0;left: 0;background: #fafcfc;}
.about_tct_right img{border-radius: 10px 30px 10px 30px;transition: all 0.5s;position: relative;z-index: 2;}
.about_tct_right:hover img{transform: translate3d(-20px, -20px,0);transition: all 0.5s;}

/* contact */
.contact_top{position: relative;padding-bottom: 40px;padding-top: 100px;margin-top: -60px;}
#allmap{height: 700px;}
.contact_pop{width: 530px;background: rgba(255, 255, 255, 0.8);border-radius: 5px;box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.05);position: absolute;top: 140px;right: 40px;padding: 40px;box-sizing: border-box;}
.contact_pop h3{font-size: 32px;font-weight: bold;color: var(--color3);padding-bottom: 20px;}
.contact_pop p{font-size: 20px;color: var(--color3);line-height: 32px;padding: 10px 0;}
.contact_pop p img{width: 19px;height: 19px;}
.contact_pop p strong{font-size: 28px;font-weight: bold;color: var(--mainColor);}
.contact_pop p span{display: block;width: 315px;font-size: 18px;color: var(--color3);margin-left: 130px;margin-top: -32px;}
.contact_pop p em{width: 109px;height: 109px;display: inline-block;margin-right: 10px;}
.contact_pop p em img{width: 100%;height: 100%;}
.contact_pop p i{display: inline-block;vertical-align: bottom;font-size: 14px;color: var(--color3);inline-size: min-content;line-height: 18px;}

.contact_btm_tit{text-align: center;}
.contact_btm_tit h3{font-size: 34px;color: var(--color3);position: relative;width: auto;display: inline-block;padding: 0 10px;}
.contact_btm_tit h3::before{content: "";display: block;width: 100%;height: 10px;background: rgba(3, 72, 181, 0.2);position: absolute;left: 0;right: 0;bottom: 0px;}
.contact_btm_tit p{font-size: 18px;line-height: 36px;color: var(--color6);margin: 20px auto;}

.contact_btm{padding: 100px 0 40px;box-sizing: border-box;}
.contact_bd{justify-content: space-between;}
.contact_bd .item{width: calc(100% / 4 - 30px);margin-right: 40px;margin-top: 15px;margin-bottom: 15px;}
.contact_bd .item:nth-child(4){margin-right: 0;}
.contact_bd .item p{width: 100%;font-size: 20px;line-height: 40px;color: var(--color3);position: relative;}
.contact_bd .item p .imgs{position: absolute;right: 1px;top: 0;width: 130px;height: 60px;}
.contact_bd .item p span{color: #e6010e;display: inline-block;vertical-align: middle;}
.contact_bd .item p input{width: 100%;height: 60px;line-height: 60px;border:1px solid var(--lineColor2);border-radius: 5px;box-sizing: border-box;padding-left: 15px;font-size: 18px;}
.contact_bd .item p textarea{width: 100%;line-height: 30px;border:1px solid var(--lineColor2);border-radius: 5px;box-sizing: border-box;padding-left: 15px;font-size: 18px;}
.contact_bd .item p button{width: 220px;line-height: 60px;text-align: center;background: var(--mainColor);border-radius: 5px;color: var(--colorf);border: none;}
.contact_bd .item:nth-child(5){width: 100%;margin-right: 0;}
.contact_bd .item:last-child{float: right;margin-right: 0;text-align: right;}
.contact_items .item{width: calc(100% / 2 - 15px);margin-top: 60px;margin-right: 30px;background: #f6f7f9;padding: 30px;box-sizing: border-box;box-sizing: border-box;}
.contact_items .item:nth-child(2n){margin-right: 0;}
.contact_items .item h3{font-size: 32px;font-weight: bold;color: var(--color3);padding-bottom: 20px;border-bottom: 1px solid var(--lineColor2);margin-bottom: 20px;background: url(../images/map_icon.png) no-repeat right 8px;}
.contact_items .item p{font-size: 20px;color: var(--color3);line-height: 32px;padding: 10px 0;}
.contact_items .item p img{width: 19px;height: 19px;}
.contact_items .item p strong{font-size: 28px;font-weight: bold;color: var(--mainColor);}
.contact_items .item p span{display: block;max-width: 440px;font-size: 18px;color: var(--color3);margin-left: 130px;margin-top: -32px;}

/* 加工服务 */
.service_items{max-width: 1920px;margin: 0 auto;}
.service_items .item{max-width: 1630px;height: 580px;overflow: hidden;position: relative;margin: 60px 0;}
.service_items .item:nth-child(odd){margin-right:290px;}
.service_items .item:nth-child(even){margin-left:290px;}
.service_items .item .pic{width: 100%;height: 100%;}
.service_items .item .pic img{transition: all 0.5s;}
.service_items .item .tct{padding: 40px;box-sizing: border-box;background: rgba(255, 255, 255, 0.8);position: absolute;top: 60px;max-width: 470px;border-radius: 10px;transition: all 0.5s;width: 100%;}
.service_items .item .tct h3{font-size: 36px;line-height: 36px;color: var(--color3);font-weight: bold;position: relative;border-bottom: 1px solid #e2e9ed;padding-bottom: 30px;padding-top: 20px;}
.service_items .item .tct h3::before{content: "";display: block;position: absolute;left: -40px;top: 50%;margin-top: -15px;width: 2px;height: 30px;background: var(--mainColor);}
.service_items .item .tct p{font-size: 18px;line-height: 36px;color: var(--color3);margin: 30px auto;text-align: justify;}
.service_items .item .tct em{display: inline-block;margin: 30px auto;width: 160px;line-height: 45px;border:1px solid var(--color3);box-sizing: border-box;font-size: 14px;color: var(--color3);text-align: center;}
.service_items .item .tct em::after{content: "";display: inline-block;vertical-align: middle;width: 16px;height: 6px;background: url(../images/more_icon2.png) no-repeat;margin-left: 30px;}
.service_items .item:nth-child(even) .tct{left: 60px;}
.service_items .item:nth-child(odd) .tct{right: 60px;}
.service_items .item:nth-child(even):hover .tct{transform: translateX(20px);transition: all 0.5s;}
.service_items .item:nth-child(odd):hover .tct{transform: translateX(-20px);transition: all 0.5s;}
.service_items .item:hover .pic img{transition: all 0.5s;transform: scale(1.01);}

.service_tit{margin-bottom: 40px;}
.service_tit h3{font-size: 36px;color: var(--color3);text-align: center;font-weight: bold;}

/* 库存材料 */
.material_con{align-items: flex-start;justify-content: space-between;}
.material_left{width: 230px;box-sizing: border-box;padding: 20px;box-shadow: 0 5px 15px rgba(0, 88, 106, 0.15);}
.material_left h3{font-size: 30px;font-weight: bold;color: var(--color3);}
.material_left>ul{border-top: 1px solid var(--colord);border-bottom: 1px solid var(--colord);padding: 20px 0;margin: 20px 0;}
.material_left>ul li{position: relative;}
.material_left>ul>li::before,
.material_left>ul>li::after{content: "";display: block;width: 16px;height: 2px;background: var(--color3);position: absolute;right: 0;top: 18px;}
.material_left>ul>li::after{transform: rotate(90deg);}
.material_left>ul>li.active::after{display: none;}
.material_left>ul>li.active::before{background: var(--mainColor);}
.material_left>ul li a{display: block;font-size: 20px;line-height: 36px;color: var(--color3);}
.material_left>ul li.active>a{color: var(--mainColor);}
.material_left>ul li ul{display: none;}
.material_left>ul li ul li a{padding-left: 20px;position: relative;font-size: 16px;}
.material_left>ul li ul li a::before{content: "";display: block;width: 10px;height: 10px;box-sizing: border-box;border:1px solid var(--color3);position: absolute;left: 0;top:14px;} 
.material_left>ul li.active ul{display: block;}
.material_left>ul li.active ul li.active a::before{background: var(--mainColor);}

.material_left>ul li a:hover{color: var(--mainColor);}
.material_left>ul li  ul li a:hover::before{background: var(--mainColor);}

.material_right{width: calc(100% - 260px);}
.material_items .item{width: calc(100% / 3 - 20px);position: relative;display: flex;justify-content: center;align-items: center;margin-right: 30px;margin-bottom: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);transition: all 0.5s;}
.material_items .item:nth-child(3n){margin-right: 0;}
.material_items .item a{width:100%;height: 100%;padding: 30px 20px;box-sizing: border-box;box-shadow: 0 8px 15px rgba(0, 88, 106, 0.05);transition: all 0.5s;position: relative;}
.material_items .item::after{content: "";display: block;width: 0;height: 3px;background: var(--mainColor);position: absolute;bottom: 0;left: 0;right: 0;transition: all 0.5s;}
.material_items .item h3{font-size: 24px;line-height: 36px;color: var(--color3);transition: all 0.5s;}
.material_items .item p{font-size: 16px;line-height: 30px;color: var(--lineColor);margin-bottom: 20px;overflow: initial;min-height:120px;}
.material_items .item span{display: block;width: 100%;height: 180px;overflow: hidden;}
.material_items .item span img{transition: all 0.5s;}
.material_items .item:hover{background: var(--colorf);box-shadow: 0 8px 15px rgba(0, 88, 106, 0.2);transition: all 0.5s;transform: translateY(-10px);}
.material_items .item:hover::after{width: 100%;transition: all 0.5s;}
.material_items .item:hover h3{color: var(--mainColor);transition: all 0.5s;}
.material_items .item:hover span img{transition: all 0.5s;transform: scale(1.1);}


.material_top{justify-content: space-between;border-bottom: 1px solid var(--colore);}
.material_top .product_left{width:50%;background: #f8f8f8;background-size: cover;padding: 35px;box-sizing: border-box;}
.view{width: 100%;box-sizing: border-box;overflow: hidden;height:500px;line-height: 500px;text-align: center;position: relative;}
.preview{width: 100%;height: 120px;overflow: hidden;position: relative;}
.preview .swiper-container .swiper-slide{width: 140px !important;height: 120px !important;border-radius: 5px;margin-right: 25px;line-height: 120px;border: 1px solid var(--colord);box-sizing: border-box;background: var(--colorf);}
.preview .swiper-container .swiper-slide img,
.view .swiper-container .swiper-slide img{max-width: 100%;max-height: 100%;object-fit: contain;}
.preview .swiper-container{padding: 0 65px;box-sizing: border-box;position: relative;}
.preview .swiper-container .swiper-slide.active-nav{border:1px solid var(--mainColor);box-sizing: border-box;}
.view .arrow-right,
.view .arrow-left{display: none;}
.preview .arrow-right,
.preview .arrow-left,
.view .arrow-right,
.view .arrow-left{color:var(--colorf);position: absolute;top: 0;width: 44px;height: 120px;border-radius: 5px;background: var(--colorb);text-align: center;line-height: 120px;z-index: 10;font-family: sans-serif;font-size: 20px;font-weight: bold;}
.preview .arrow-left,
.view .arrow-left{left: 0px;}
.preview .arrow-right,
.view .arrow-right{right: 0px;}
.preview .arrow-right:hover,
.preview .arrow-left:hover{background: var(--mainColor);}

.product_right{width: 46%;padding-top: 40px;box-sizing: border-box;}
.product_right .line {height: 1px;width: 100%;background: var(--colorc);margin: 30px auto;}
.product_right h3{font-size: 34px;line-height: 36px;color: var(--color3);}
.product_right h5{font-size: 22px;line-height: 30px;color: var(--color3);margin-bottom: 20px;position: relative;}
.product_right h5::before{content: "";display: inline-block;vertical-align: middle;width: 2px;height: 20px;background: var(--mainColor);margin-right: 15px;}
/*.product_right h5::after{content: "";display: block;width: 16px;height: 17px;background: url(../images/por_jt.png) no-repeat;position: absolute;right: 0;top: 7px;}*/
.product_right p{font-size: 16px;line-height: 30px;color: var(--color6);}
.product_right em{display: block;width: 100%;line-height: 60px;text-align: center;font-size: 18px;color: var(--colorf);background: var(--mainColor);margin-top: 30px;}

.product_btm_tit{justify-content: space-between;border-bottom: 1px solid var(--colore);}
.product_btm_tit h3{font-size: 30px;color: var(--color3);padding: 30px 0;box-sizing: border-box;}
.product_btm_tit h3::before{content: "";display: inline-flex;width: 2px;height: 20px;background: var(--mainColor);margin-right: 20px;}
.product_btm_tit ul{width: 60%;align-items: center;justify-content: flex-end;}
.product_btm_tit ul li{font-size: 20px;color: var(--color3);cursor: pointer;margin-left: 20px;line-height: 100px;}
.product_btm_tit ul li.active,
.product_btm_tit ul li:hover{color: var(--mainColor);border-bottom: 1px solid var(--mainColor);}

.product_btm_items{margin: 40px auto;}
.product_btm_items .item{display: none;}
.product_btm_items .item.active{display: block;}

.product_page{margin: 40px auto;}
.product_page ul{background: var(--bgColor2);padding: 25px 30px;box-sizing: border-box;display: flex;justify-content: space-between;width: 100%;}
.product_page ul li{width: 40%;background: var(--colorf);}
.product_page ul li:nth-child(1){text-align: right;}
.product_page ul li:nth-child(2){width: 15%;text-align: center;}
.product_page ul li a{font-size: 16px;line-height: 60px;color: var(--color3);padding: 0 30px;box-sizing: border-box;justify-content: space-between;width: 100%;align-items: center;display: inline-flex;}
.product_page ul li a em{display:inline-block;vertical-align: middle;background: url(../images/ban_jt2.png) no-repeat;width: 22px;height: 22px;transition: ease-in-out 0.5s;}
.product_page ul li:nth-child(2) a{justify-content: space-evenly;}
.product_page ul li:nth-child(2) a em{background: url(../images/product_page_icon.png) no-repeat;width: 24px;height: 16px;}
.product_page ul li:nth-child(1) a em{transform: rotate(180deg);}
.product_page ul li a:hover{background: var(--mainColor);color: var(--colorf);transition: ease-in-out 0.5s;}
.product_page ul li:hover a em{background: url(../images/ban_jt.png) no-repeat;}
.product_page ul li:nth-child(2):hover a em{background: url(../images/product_page_icon2.png) no-repeat;}

.material_recommend{margin-top: 40px;}
.material_recommend .item{width: calc(100% / 4 - 22.5px);margin-right: 30px;margin-bottom: 30px;position: relative;}
.material_recommend .item:nth-child(4n){margin-right: 0;}
.material_recommend .item::after{content: "";display: block;width: 0;height: 3px;background: var(--mainColor);position: absolute;bottom: 0;left: 0;right: 0;transition: all 0.5s;}
.material_recommend .item h3{font-size: 24px;line-height: 36px;color: var(--color3);transition: all 0.5s;}
.material_recommend .item p{font-size: 16px;line-height: 30px;color: var(--lineColor);margin-bottom: 20px;}
.material_recommend .item span{display: block;width: 100%;height: 180px;overflow: hidden;}
.material_recommend .item span img{transition: all 0.5s;}
.material_recommend .item:hover{background: var(--colorf);transition: all 0.5s;transform: translateY(-10px);}
.material_recommend .item:hover::after{width: 100%;transition: all 0.5s;}
.material_recommend .item:hover h3{color: var(--mainColor);transition: all 0.5s;}
.material_recommend .item:hover span img{transition: all 0.5s;transform: scale(1.1);}

.recommend_more{width: 200px;line-height: 60px;text-align: center;font-size: 16px;color: var(--colorf);background: var(--mainColor);margin: 30px auto;cursor: pointer;}


/* 分页 */
.page_list,
.page_list ul {
    width: 100%;
    padding: 30px 0;
}

.page_list ul {
    justify-content: center;
}
 
.page_list ul li {
    width: 60px;
    height: 60px;
    border: 1px solid var(--colord);
    text-align: center;
    line-height: 58px;
    font-size: 20px;
    color: var(--color3);
    margin: 0 5px;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 5px 10px rgba(0, 91, 172, 0.1);
}


.page_list ul li a {
    display: block;
    width: 58px;
    height: 58px;
    color: var(--color3);
}
.page_list ul li:first-child a,
.page_list ul li:last-child a{background: url(../images/ban_jt2.png)no-repeat center;background-size: 30%;}
.page_list ul li:first-child a{transform: rotateY(180deg);}

.page_list ul li.active a,
.page_list ul li:hover a {
    background: var(--mainColor);
    color: var(--colorf);
    border: 1px solid var(--mainColor);
}
.page_list ul li:hover:first-child a,
.page_list ul li:hover:last-child a{background:var(--mainColor) url(../images/ban_jt.png)no-repeat center;background-size: 30%;}